<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 entry_general_header_td">
            <h4>
                <span style="white-space: nowrap">
                    <strong style="color: #888;text-transform: uppercase;"><i class="fa fa-fw fa-globe"></i>
                        {{selectedPartner.name}}
                    </strong>

                    <strong>{{selectedPartnerFolder.folderName}}</strong>
                </span>

                <img alt="Loading..." ng-if="loadingPage" src="img/loader-mini.gif"/>
                &nbsp;&nbsp;&nbsp;<span ng-show="folder.id" folder-actions class="font-95em"></span>
            </h4>
        </div>
    </div>

    <div class="row">
        <table cellspacing="0"
               class="table table-hover table-condensed table-striped font-95em table-border-bottom"
               ng-class="{'opacity_4':loadingPage}">
            <thead>
            <tr data-ng-if='selectedPartnerFolder.entries'>
                <th ng-click="sort('type')" class="cursor_pointer">
                    <span style="font-size: 12px; text-transform: uppercase">TYPE</span>
                    <i ng-if="params.sort!=='type'" class="sortable fa fa-angle-down"></i>
                    <i ng-show="params.sort=='type'" style="font-size: 14px;" class="fa opacity_4"
                       ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
                </th>
                <th ng-click="sort('part_id')" class="cursor_pointer"
                    style="font-size: 12px; text-transform: uppercase">
                    <span style="font-size: 12px; text-transform: uppercase">Part ID</span>
                    <i ng-if="params.sort!=='part_id'" class="sortable fa fa-angle-down"></i>
                    <i ng-show="params.sort=='part_id'" style="font-size: 14px" class="fa opacity_4"
                       ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
                </th>
                <th data-ng-click="sort('name')" class="cursor_pointer"
                    style="font-size: 12px; text-transform: uppercase">
                    <span style="font-size: 12px; text-transform: uppercase">Name</span>
                    <i ng-if="params.sort!=='name'" class="sortable fa fa-angle-down"></i>
                    <i ng-show="params.sort=='name'" style="font-size: 14px" class="fa opacity_4"
                       ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
                </th>
                <th ng-click="sort('status')" class="cursor_pointer">
                    <span style="font-size: 11px; text-transform: uppercase">Status</span>
                    <i ng-if="params.sort!=='status'" class="sortable fa fa-angle-down"></i>
                    <i ng-show="params.sort=='status'" style="font-size: 14px" class="fa opacity_4"
                       ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
                </th>
                <th style="width:100px;">
                    <i class="fa fa-flask fa-fw" style="font-size: 14px; "></i>
                    <img src="img/dna.svg" width="15px" alt="has dna"/>
                </th>
                <th ng-click="sort('created')" class="cursor_pointer">
                    <span style="font-size: 11px; text-transform: uppercase">Created</span>
                    <i ng-show="params.sort=='created'" style="font-size: 14px" class="fa opacity_4"
                       ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
                    <i ng-if="params.sort!=='created'" class="sortable fa fa-angle-down"></i>
                </th>
            </tr>

            <tr data-ng-show='!selectedPartnerFolder&&!remoteRetrieveError'>
                <td colspan="10">
                    <img alt="Loading..." src="img/loader-mini.gif"/>
                    Loading...
                </td>
            </tr>
            <tr ng-if="remoteRetrieveError">
                <td colspan="10" style="color: red;">
                    <i class="fa fa-exclamation-triangle"></i> Error retrieving remote folder contents
                </td>
            </tr>
            <tr data-ng-show="selectedPartnerFolder.entries.length == 0">
                <td colspan="10">No entries for selection</td>
            </tr>
            </thead>
            <tbody>
            <tr data-ng-repeat="entry in selectedPartnerFolder.entries | orderBy:'creationTime':true">
                <td style="opacity:0.7; font-weight: bold; font-size: 0.85em; text-shadow: 0 1px 0 #fff">
                    {{entry.type | uppercase}}
                </td>
                <td><a ng-click="getRemoteEntryDetails(selectedPartner.id, entry.id, $index)"
                       class="cell_mouseover form-group"
                       popover-trigger="mouseenter" ng-mouseover="tooltipDetails(entry)"
                       uib-popover-template="worFolderContentsPopoverTemplate"
                       popover-placement="right">{{entry.partId}}</a>
                </td>
                <td>
                    <div title="{{entry.name}}" class="ellipsis" style="width: 350px">{{entry.name}}</div>
                    <div title="{{entry.shortDescription}}" class="small"
                         style="opacity: 0.6; width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                        {{entry.shortDescription}}
                    </div>
                </td>
                <td style="vertical-align: middle; width:100px; white-space:nowrap">
                    <span class="label" ng-class="{
                    'ice-label-success':entry.status.toUpperCase()=='COMPLETE',
                    'label-default': entry.status.toUpperCase()=='In Progress'.toUpperCase(),
                    'ice-label-danger': entry.status.toUpperCase()=='Abandoned'.toUpperCase(),
                    'ice-label-info': entry.status.toUpperCase()=='Planned'.toUpperCase()}">{{entry.status | capitalize}}
                    </span>
                </td>
                <td style="vertical-align: middle;">
                    <i ng-show="entry.hasSample" class="fa fa-flask fa-fw"
                       style="color: #555; font-size: 14px;"></i>
                    <i ng-show="!entry.hasSample" class="fa fa-square fa-fw"
                       style="opacity: 0; font-size: 14px;"></i>
                    <img ng-show="entry.hasSequence" src="img/dna.svg" width="15px"/>
                </td>
                <td style="width:130px; white-space:nowrap; vertical-align: middle;">
                    {{entry.creationTime | date:'MMM d, yyyy'}}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="row" ng-if="selectedPartnerFolder&&selectedPartnerFolder.entries.length > 0">
        <div class="col-md-5" style="padding-left: 0">
            <uib-pagination total-items="selectedPartnerFolder.count" ng-change="worFolderContentPageChange()"
                        ng-model="params.currentPage"
                            max-size="maxSize" class="pagination-sm" items-per-page="15"
                            boundary-links="true"></uib-pagination>
        </div>
        <div class="col-md-7" style="margin-top: 25px;">
            <strong class="small">
                <i ng-show="loadingPage" class="fa fa-spin fa-gear opacity_4"></i> {{pageCounts(params.currentPage,
                selectedPartnerFolder.count)}}
            </strong>
        </div>
    </div>
</div>

